/* eslint-disable no-unused-vars */
/* eslint-disable no-undef */
function Carousel(box) {
    this.box = document.querySelector(box); //html节点
    //this.index = +(src[8]-1)//图片下标
    //this.points=[]//!图片下方的圆点集合
    //Carousel.prototype.imgs=document.querySelectorAll(this.img)
}
//Carousel.prototype.points=points//html节点
Carousel.prototype.point = function (points, img) {
    //todo圆点
    Carousel.prototype.points = points; //html节点
    Carousel.prototype.img = img; //html标签名
    Carousel.prototype.imgs = document.querySelectorAll(this.img);
    for (let i = 0; i < this.imgs.length; i++) {
        point[i] = document.createElement('div');
        point[i].className = 'point';
        point[i].dataset.i = i;
        this.points.appendChild(point[i]);
    }
    changePoint.call(this, point);
};
function changePoint(point) {
    //todo圆点样式随图片的变动而变动
    point.forEach((e, i) => {
        if (i != this.index) {
            e.style['background-color'] = 'white';
        }
        let src = this.imgs[i].getAttribute('src'); //!let
        this.index = +(src[8] - 1); //图片下标
    });
    point[0].style['background-color'] = 'black';
}

Carousel.prototype.bind = function () {
    //todo绑定
    //!all 元素节点
    bindPoint.apply(this, arguments);
    left.apply(this, arguments);
    right.apply(this, arguments);
};
function bindPoint() {
    this.points.addEventListener('click', () => {
        this.index = e.target.getAttribute('data-i');
        this.point.forEach((e, i) => {
            if (i != this.index) e.style['background-color'] = 'white';
        });
        this.point[this.index].style['background-color'] = 'black';
        this.imgs[this.index].style['z-index'] = 1;
    });
}
function left() {}
function right() {}

Carousel.prototype.auto = function () {
    //todo自动轮播

    document.addEventListener('visibilitychange', () => {
        //界面不显示时不轮播
        if (document.hidden) clearInterval(this.timer); //判断网页是否被隐藏
        else {
            clearInterval(this.timer); //防止定时器叠加,鼠标移出也会触发定时器
        }
    });
};
//移入
function enter() {
    this.img.addEventListener('mouseenter', () => clearInterval(this.timer));
}
//移出
function leave() {
    this.img.addEventListener('mouseleave', () => this.auto());
}
let points = document.querySelector('.points');
let all = document.querySelector('.all'),
    timer;
let point = []; //图片下方的圆点集合
let c1 = new Carousel('.all');
console.log(c1);
c1.point(points, 'img');
c1.bind(all);
